<template>
  <div class="ReadMeterStatistics">
    <!-- 抄表统计 -->

    <div id="ReadMeterStatistics" class="readMeterStatistics-main"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import { getCbStatistics } from '@/api/waterMeterInfo/flWaterMeterInfo/index'
export default {
  name: 'ReadMeterStatistics',
  data() {
    return {
      echarts: '',
      waterData: [],
    }
  },
  methods: {
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let ReadMeterStatistics = document.getElementById('ReadMeterStatistics')
      ReadMeterStatistics.style.height = height - 40 + 'px'
      ReadMeterStatistics.style.width = width - 15 + 'px'
      this.echarts = this.$echarts.init(ReadMeterStatistics)
      this.echarts.resize()
      // this.createEcharts()
      //this.AlwaysCopyData()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(
        document.getElementById('ReadMeterStatistics')
      )
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: '60%',
          top: 'center',
          data: [{ name: '已抄 ' + 0 }, { name: '未抄 ' + 0 }],
        },
        /*  graphic: [
                    {
                        type: 'group',
                        left: '10',
                        top: 30,
                        children: [
                            {
                                type: 'text',
                                z: 100,
                                left: 'center',
                                top: 'middle',
                                style: {
                                    fill: '#333',
                                    text: [
                                        '总数:0',
                                        '已抄:0',
                                        '未抄:0'
                                    ].join('\n'),
                                    font: '20px Microsoft YaHei'
                                }
                            }
                        ]
                    }
                ], */
        series: [
          {
            name: '抄表统计',
            type: 'pie',
            radius: '70%',
            center: ['30%', '50%'],
            data: [],
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    // 获取集中器统计数
    async AlwaysCopyData(call) {
      const res = await getCbStatistics()
      console.log(res.data, 'qingqiu ')
      const values = res.data
      let resData = []
      // resData[0] = {value: values[0], name: '总数 '+values[0]};
      resData[0] = { value: values.do, name: '已抄 ' + values.do, type: '1' }
      resData[1] = {
        value: values.undo,
        name: '未抄 ' + values.undo,
        type: '0',
      }
      console.log(resData, '参数对么')

      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: '60%',
          top: 'center',
          data: [
            { name: '已抄 ' + values.do },
            { name: '未抄 ' + values.undo },
          ],
        },
        /*   graphic: [
                    {
                        type: 'group',
                        left: '10',
                        top: 30,
                        children: [
                            {
                                type: 'text',
                                z: 100,
                                left: 'center',
                                top: 'middle',
                                style: {
                                    fill: '#333',
                                    text: [
                                        '总数:'+values.sum,
                                        '已抄:'+values.do,
                                        '未抄:'+values.undo
                                    ].join('\n'),
                                    font: '20px Microsoft YaHei'
                                }
                            }
                        ]
                    }
                ], */
        series: [
          {
            color: ['#0B9AC3', '#E69620'],
            name: '抄表统计',
            type: 'pie',
            radius: '70%',
            center: ['30%', '50%'],
            data: resData,
            itemStyle: {
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
      var self = this
      this.echarts.on('click', function (param) {
        console.log(param)

        console.log(param.data.type)
        var type = '0' //未抄
        if (param.data.type == '1') {
          //已抄
          type = '1'
        }
        console.log(self)
        console.log('type:' + type)
        self.$router.push({
          // name:'水表资料总表',
          path: '/shuiBiaoXinXi/flWaterMeterInfo',
          query: { isCb: type },
        })
      })
      call && call()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
  mounted() {
    this.createEcharts()
    this.AlwaysCopyData(() => {
      let width = document.querySelector('.ReadMeterStatistics').parentNode
        .parentNode.parentNode.style.width
      let height = document.querySelector('.ReadMeterStatistics').parentNode
        .parentNode.parentNode.clientHeight
      console.info('width--', width.split('p')[0])
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
}
</script>

<style>
.readMeterStatistics-main {
  width: 320px;
  height: 220px;
}
</style>
